<template>
    <div id="box">
        <transition name="animation">
            <!--
            添加一个进入页面时的动画，flag为true时才会显示内容
            data 中有flag属性
            当进入页面后的100毫秒会将flag改为true从而触发动画效果

            -->
            <div class="top" v-show="flag">

                <h1 class="title">
                    计税规则
                </h1>
                <el-card shadow="hover">
                    <div class="inout" ref="inout">
                        <el-button type="primary" size="mini" @click="$router.push('/home/ruleAdd?isAdd='+true)">新增</el-button>
                    </div>
                    <el-table :data="tableData" v-loading="loading">
                        <el-table-column label="方案名称" align="center">
                            <template v-slot="scope">
                                <h1>{{ scope.row.name }}</h1>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" align="center" prop="type"/>
                        <el-table-column label="是否计税" align="center">
                            <template v-slot="scope">
                                {{ scope.row.isTrue ? '是' : '否' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="起征点" align="center">
                            <template v-slot="scope">
                                {{ scope.row.startNum ? scope.row.startNum : '--' }}
                            </template>
                        </el-table-column>

                        <el-table-column label="保留小数位" align="center" prop="type">
                            <template v-slot="scope">
                                {{ scope.row.minNum ? scope.row.minNum + '位小数' : '--' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template v-slot="scope">
                                <el-link type="primary" :underline="false" @click="$router.push({path:'/home/ruleAdd',query:{...scope.row,isAdd:false}})">编辑</el-link>
                                <el-link type="danger" :underline="false" style="margin: 0 5px" @click="open(scope.row._id)">删除</el-link>

                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flag: false,
            tableData: [],
            loading: true
        };
    },
    mounted() {
        this.flag = true
        this.getData()
        setTimeout(() => {
            // 判断是否有数据，如果没有数据，提示服务器连接失败
            if (this.tableData.length === 0) {
                this.loading = false
                this.$message.error('服务器响应失败')
            }
        }, 5000)
    },
    methods: {
        async getData() {
            let {data} = await this.$axios.get('tax/rule')
            this.tableData = data.data
            this.loading = false
        },
        open(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.$axios.delete('tax/ruleDel', {
                    params: {
                        id
                    }
                })
                this.getData()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
}
</script>

<style lang="scss" scoped>


#box {
    height: 100%;

    .title {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        line-height: 30px;
        background: #fff;
        border-bottom: 1px #f0f0f0 solid;
        box-shadow: 0 3px 10px 3px #f0f0f0;
        font-weight: 600;

    }

    .animation-enter, animation-leave-to {
        //transform: translateX(50px);
        opacity: 0;
    }

    .animation-enter-active {
        transition: all .5s ease-in-out;
    }

    .animation-enter-to, animation-leave {
        //transform: translateX(0);
        opacity: 1;
    }

    .top {
        height: 100%;
        position: relative;


        .el-card {
            height: 100%;
            overflow-y: auto;

            .inout {
                padding: 10px;
                box-sizing: border-box;
            }

            &::-webkit-scrollbar {
                display: none;
            }

            ::v-deep .el-card__body {
                margin-top: 50px !important;
            }


        ;
        }
    }
}
</style>
